---
interface Props {
  loading?: boolean
  sleep?: boolean
  love?: boolean
}

const { loading = false, sleep = false, love = false } = Astro.props
---

<span
  id="animate-face"
  data-sleep={sleep}
  data-love={love}
  data-loading={loading}
>
  <span class="eye"></span><span class:list={["underscores", { wobble: loading && !sleep }]}><span
      
    >_</span><span>_</span><span>_</span><span>_</span><span>_</span><span>_</span><span
      
    >_</span></span><span class="eye"></span>
</span>

<style>
.wobble {
  display: inline-block;
}

.wobble span {
  display: inline-block;
  animation: wobble 1s infinite ease-in-out;
}

@keyframes wobble {
  0% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-3px);
  }
  50% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(3px);
  }
  100% {
    transform: translateY(0);
  }
}

.wobble span:nth-child(1) {
  animation-delay: 0s;
}
.wobble span:nth-child(2) {
  animation-delay: 0.1s;
}
.wobble span:nth-child(3) {
  animation-delay: 0.2s;
}
.wobble span:nth-child(4) {
  animation-delay: 0.3s;
}
.wobble span:nth-child(5) {
  animation-delay: 0.4s;
}
.wobble span:nth-child(6) {
  animation-delay: 0.5s;
}
.wobble span:nth-child(7) {
  animation-delay: 0.6s;
}
</style>

<script>
let currentObserver: MutationObserver | null = null
let currentInterval: number | null = null

function blinkEye(faceElement: HTMLElement) {
  const sleep = faceElement.dataset.sleep === "true"
  const love = faceElement.dataset.love === "true"

  if (!(sleep || love)) {
    const eyeElements = faceElement.querySelectorAll(".eye")
    eyeElements.forEach((el) => {
      el.textContent = "-"
    })

    setTimeout(() => {
      eyeElements.forEach((el) => {
        el.textContent = "0"
      })
    }, 100)
  }
}

function startRandomBlinking(faceElement: HTMLElement) {
  if (currentInterval) {
    clearInterval(currentInterval)
  }

  currentInterval = window.setInterval(() => {
    const sleep = faceElement.dataset.sleep === "true"
    const love = faceElement.dataset.love === "true"

    if (!(sleep || love) && Math.random() < 0.08) {
      blinkEye(faceElement)
    }
  }, 200)
}

function updateEyes(faceElement: HTMLElement) {
  const sleep = faceElement.dataset.sleep === "true"
  const love = faceElement.dataset.love === "true"
  const eyeElements = faceElement.querySelectorAll(".eye")

  if (sleep) {
    if (currentInterval) {
      clearInterval(currentInterval)
      currentInterval = null
    }
    eyeElements.forEach((el) => (el.textContent = "×"))
  } else if (love) {
    if (currentInterval) {
      clearInterval(currentInterval)
      currentInterval = null
    }
    eyeElements.forEach((el) => (el.textContent = "♡"))
  } else {
    eyeElements.forEach((el) => (el.textContent = "0"))
    startRandomBlinking(faceElement)
  }
}

function cleanup() {
  if (currentInterval) {
    clearInterval(currentInterval)
    currentInterval = null
  }
  if (currentObserver) {
    currentObserver.disconnect()
    currentObserver = null
  }
}

function initFace() {
  // Clean up any existing instances
  cleanup()

  const faceElement = document.getElementById("animate-face")
  if (!faceElement) {
    return
  }

  updateEyes(faceElement)

  // Create an observer to watch for attribute changes
  currentObserver = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
      if (mutation.type === "attributes") {
        updateEyes(faceElement)
      }
    })
  })

  // Start observing
  currentObserver.observe(faceElement, {
    attributes: true,
    attributeFilter: ["data-sleep", "data-love", "data-loading"],
  })
}

// Cleanup before view transitions
document.addEventListener("astro:before-swap", cleanup)

// Initialize on each page load
document.addEventListener("astro:page-load", initFace)

// Initial load
if (document.readyState === "loading") {
  document.addEventListener("DOMContentLoaded", initFace)
} else {
  initFace()
}
</script>
